<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <h1>slider 滑块</h1>
      <div id="demoSlider"></div>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["slider"], function () {
        var slider = layui.slider;
        var sliderInst = slider.render({
          // slider 2.4.0+
          elem: "#demoSlider", // 传元素选择器
          // type: "vertical", // default 水平滑块 vertical 垂直滑块
          height: 100, // type: "vertical" 时生效
          // disabled: true,
          // theme: "red", // 主题色
          min: 10, // 最小值
          max: 80, // 最大值
          range: true, //是否开启范围选择功能
          value: [20, 30], // 初始值 number array
          step: 1, // 拖动的步长
          showstep: true, // 是否显示间断点
          tips: true, // 是否显示提示
          setTips: function (value) {
            //自定义提示文本
            return value + "%";
          },
          // input: true, // 是否显示右侧输入框 range 为true 则无效
          change: function (value) {
            console.log(value); //动态获取滑块数值
            //do something
          },
        });
        // 实例方法
        sliderInst.config; // 获得当前实例的配置项
        // sliderInst.setValue(20); // 没有开启范围选择的话
        sliderInst.setValue(20, 0); // 设置开始值 如果自己设置min max的话有坑 10+20 = 30
        sliderInst.setValue(60, 1); // 设置结尾值 如果自己设置min max的话有坑 10+30 = 70
      });
    </script>
  </body>
</html>
